<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script>
        //单页面路由
        window.onhashchange = function () {
            //主要是控制hash值的变化，来切换页面
            console.log(location.hash);
            if (location.hash.indexOf("caijing") != -1) {
                app.innerHTML = `<div>
                    <h1>财经内容</h1>
                    </div>`
            } else if (location.hash.indexOf("keji") != -1) {
                app.innerHTML = `<div>
                    <h1>新增内容</h1>
                    </div>`
            } else {
                app.innerHTML = `<div>
                    <h1>主页内容 我是新增的内容
                    我我我我我我我我我我我我我我我我
                    </h1>
                    </div>`
            }
        }
        //自调用
        window.onhashchange()
    </script>
</body>

</html>